<template>
	<view class="navbar-container">
		<view :style="{height: status_height+'rpx'}"></view>
		<uni-icons @click="to_back" type="back" color="#fff" size="25" v-if="is_search" />
		<view class="navbar-content"
			:style="{marginRight: margin_right+10+'rpx',marginLeft: is_search ? '70rpx': ''}"
			@click="to_search">
			<uni-icons type="search" size="25" color="#999" />
			<input v-if="is_search" class="search-inp" type="text" @confirm="handle_confirm"
				:value="value" placeholder="请输入关键词" @focus="handle_focus" />
			<text v-else class="search-text">请输入关键词</text>
		</view>
		<view style="height: 22rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: "NavBar", // 可以通过 devtool 快速查找
		data() {
			return {
				status_height: 22,
				margin_right: 0
			};
		},
		props: {
			is_search: {
				type: Boolean,
				default: false
			},
			value: String
		},
		created() {
			const system_info = uni.getSystemInfoSync() // 同步获取系统信息
			// 状态栏高度不为零，就赋值给 status_height
			system_info.statusBarHeight && (this.status_height = system_info.statusBarHeight * 2)

			// 注释不能和条件语句写一行
			// #ifdef MP-WEIXIN		
			// 小程序右上角的胶囊按钮
			const capsule_info = uni.getMenuButtonBoundingClientRect()
			this.margin_right = (capsule_info.width + innerWidth - capsule_info.right) * 2
			this.status_height = capsule_info.top * 2
			// #endif
		},
		methods: {
			to_search() {
				if (!this.is_search) {
					uni.navigateTo({
						url: '/pages/search/search'
					})
				}
			},
			to_back() {
				// #ifdef H5		
				// h5 页面可以从其他页面进入网页，可能会没有路由记录栈
				uni.switchTab({
					url: '/pages/index/index'
				})
				// #endif

				// #ifndef H5	
				// 非 h5 只能从首页进入
				uni.navigateBack()
				// #endif
			},
			handle_confirm(e) {
				const value = e.detail.value.trim()
				if (value) {
					this.$emit('confirm', value)
				}
			},
			handle_focus() {
				this.$emit('focus')
			}
		},
	}
</script>

<style lang="scss">
	.navbar-container {
		background-color: $base-color;
		width: 100%;

		.uniui-back {
			position: fixed;
			left: 10rpx;
		}

		.navbar-content {
			@include flex(flex-start);
			margin-left: 10rpx;
			height: 60rpx;
			color: #808080;
			box-sizing: border-box;
			border-radius: 30rpx;
			padding: 0 10rpx;
			background-color: #fff;

			.search-inp {
				flex: 1;
				padding-left: 10rpx;
			}

			.search-text {
				padding-left: 10rpx;
			}
		}
	}
</style>
